<template>
  <div class="container">
    <div class="role-title">评审专家注册向导</div>
    <el-form class="form" ref="unitRegisterRef" :model="form" :rules="rules" label-width="auto">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="所属单位" prop="affiliatedUnit">
            <!--            <el-input v-model="form.recommendUnit" placeholder="请输入推荐单位"/>-->
            <el-select
                filterable
                remote
                v-model="form.affiliatedUnit"
                placeholder="请选择推荐单位"
                :remote-method="remoteMethodDept"
            >
              <el-option
                  v-for="item in deptList"
                  :key="item.deptId"
                  :label="item.deptName"
                  :value="item.deptId"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="姓名" prop="trueName">
            <el-input v-model="form.trueName" placeholder="请输入单位性质"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="性别" prop="sex">
            <el-select v-model="form.sex" placeholder="请选择性别">
              <el-option label="男" value="0"/>
              <el-option label="女" value="1"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="身份证号" prop="idCard">
            <el-input v-model="form.idCard" placeholder="请输入联系电话"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号码" prop="phoneNumber">
            <el-input v-model="form.phoneNumber" placeholder="请输入座机电话"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="form.email" placeholder="请输入注册账号"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="注册账号" prop="userName">
            <el-input v-model="form.userName" placeholder="请输入注册账号"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="密码" prop="password">
            <el-input v-model="form.password" type="password" placeholder="请输入密码"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="确认密码" prop="password2">
            <el-input v-model="form.password2" type="password" placeholder="请输入确认密码"/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <div style="text-align:center; margin-top: 40px">
            <el-button size="large" @click="goBack">返回</el-button>
            <el-button size="large" type="primary" color="#05559B" style="margin-left: 100px;" @click="submit">提交</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup>
import {useRouter} from "vue-router";
import {deptList2} from "@/api/system/dept.js";
import {register} from "@/api/login.js";

const router = useRouter();
const {proxy} = getCurrentInstance();
// const {sys_user_sex} = proxy.useDict('sys_user_sex');
const deptList = ref([])

const data = reactive({
  form: {},
  rules: {
    affiliatedUnit: [{required: true, message: "岗位名称不能为空", trigger: "blur"}],
    trueName: [{required: true, message: "岗位编码不能为空", trigger: "blur"}],
    sex: [{required: true, message: "岗位顺序不能为空", trigger: "blur"}],
    idCard: [{required: true, message: "岗位顺序不能为空", trigger: "blur"}],
    phoneNumber: [{required: true, message: "岗位顺序不能为空", trigger: "blur"}],
    email: [{required: true, message: "岗位顺序不能为空", trigger: "blur"}],
    userName: [{required: true, message: "岗位顺序不能为空", trigger: "blur"}],
    password: [{required: true, message: "岗位顺序不能为空", trigger: "blur"}],
    password2: [{required: true, message: "岗位顺序不能为空", trigger: "blur"}],
  }
});

const {form, rules} = toRefs(data);

function remoteMethodDept(query) {
  if (query) {
    deptList2({name: query}).then((res) => {
      deptList.value = res.data;
    });
  } else {
    deptList2({pageNum: 1, pageSize: 10}).then((res) => {
      deptList.value = res.data;
    });
  }
}
function submit() {
  proxy.$refs.unitRegisterRef.validate(valid => {
    if (valid) {
      if (form.value.password !== form.value.password2) {
        proxy.$modal.msgError("两次密码不一致");
        return
      }
      form.value.registerTypeCode = 3
      register(form.value).then(res => {
        if (res.code === 200) {
          proxy.$modal.msgSuccess(res.msg);
          router.push('/auditRegister')
        }
      })
    }
  })
}
function goBack() {
  router.go(-1);
}
</script>

<style scoped lang="scss">
.container {
  width: 80%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 60px;

  .role-title {
    width: 100%;
    height: 100px;
    line-height: 100px;
    font-size: 30px;
    font-weight: 500;
    text-align: center;
    color: #057ec4;
    border-bottom: 1px solid #057ec4;
  }

  .form {
    width: 100%;
    margin-top: 40px;
  }
}
</style>
